<template>
  <vp-dynamic-form
    :form-schema="formSchema"
    :fields="fields"
    ref="schemaForm"
  ></vp-dynamic-form>
</template>
<script lang="ts">
import { defineComponent, ref, computed, onBeforeMount } from "vue";
import { VpDynamicForm } from "@vue-ant-plus/components";
export default defineComponent({
  name: "save-user-form",
  props: {
    item: Object,
  },
  components: { VpDynamicForm },
  setup(props) {
    const schemaForm = ref<any>(null);
    const fields = ref<any>({
      status: 1,
      roleIds: "",
    });
    const formItem = ref<any>([
      {
        type: "Input",
        label: "用户名",
        field: "username",
        value: "",
        props: {
          placeholder: "请输入用户名",
        },
        rules: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
      },
      // {
      //   type: "Input",
      //   label: "姓名",
      //   field: "realname",
      //   value: "",
      //   props: {
      //     placeholder: "请输入姓名",
      //   },
      //   rules: [
      //     {
      //       required: true,
      //       message: "请输入姓名",
      //       trigger: "blur",
      //     },
      //   ],
      // },
      // {
      //   type: "Input",
      //   label: "密码",
      //   field: "password",
      //   value: "",
      //   props: {
      //     placeholder: "请输入密码",
      //   },
      //   rules: [
      //     {
      //       required: true,
      //       message: "请输入密码",
      //       trigger: "blur",
      //     },
      //   ],
      // },
      // {
      //   type: "Select",
      //   label: "权限",
      //   field: "roleIds",
      //   props: {
      //     placeholder: "请选择权限",
      //   },
      //   asyncOptions: () => {
      //     return new Promise<any>((resolve, reject) => {
      //       setTimeout(() => {
      //         resolve([
      //           {
      //             label: 1,
      //             value: 1,
      //           },
      //         ]);
      //       }, 100);
      //     });
      //   },
      //   rules: [
      //     {
      //       required: true,
      //       message: "请选择权限",
      //       trigger: "blur",
      //     },
      //   ],
      // },
      // {
      //   type: "Radio",
      //   label: "状态",
      //   field: "status",
      //   options: [
      //     {
      //       label: "禁用",
      //       value: 2,
      //     },
      //     {
      //       label: "启用",
      //       value: 1,
      //     },
      //   ],
      // },
      {
        type: "Select",
        label: "设备型号",
        field: "model",
        props: {
          placeholder: "请选择设备型号",
        },
        options: [],
        rules: [
          {
            required: true,
            message: "请选择设备型号",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Select",
        label: "硬件版本",
        field: "hardwareVersionId",
        props: {
          placeholder: "请选择硬件版本",
        },
        rules: [
          {
            required: true,
            message: "请选择硬件版本",
            trigger: "blur",
          },
        ],
        asyncOptions: () => {
          return new Promise<void>((resolve, reject) => {
            resolve([
              {
                label: "大萨达",
                value: 1,
              },
            ]);
          });
        },
      },
      {
        type: "Upload",
        label: "上传附件",
        field: "file",
        value: "",
        props: {
          type: "drag",
          maxCount: 1,
          accept: ".apk",
          beforeUpload: (file) => {
            return false;
          },
        },
        rules: [
          {
            required: true,
            message: "请上传附件",
            trigger: "blur",
          },
        ],
      },
    ]);
    const setFields = () => {
      fields.value = {
        status: 2,
      };
    };
    const formSchema = computed(() => {
      return {
        formItem: formItem.value,
      };
    });

    return {
      schemaForm,
      formSchema,
      fields,
    };
  },
});
</script>
